<template>
    <view class="list-item" v-for="item in props.data" :key="item.id"
        @click="navTo(`/subPackage/index/jobDetail?id=${type == 1 ? item.id : item.job_id}`)">
        <view class="top-info dispaly-just-between">
            <view class="title">{{ item.job_name }}</view>
            <view class="rate">
                <tn-rate readonly v-model="item.star" inactive-color="#d2d2d2" active-color="#f1b340" />
            </view>
        </view>
        <view class="tip dispaly-center">
            <view class="tip-item" v-for="desc in item.job_desc.split(',')" :key="desc">{{ desc }}</view>
        </view>
        <view class="bottom-info dispaly-just-between">
            <view class="com-info dispaly-center">
                <view class="com-img">
                    <image mode="aspectFill" :src="item.company_logo" />
                </view>
                <view class="con-name">{{ item.company_name }}</view>
            </view>
            <view class="address">{{ item.areas }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import TnRate from '@tuniao/tnui-vue3-uniapp/components/rate/src/rate.vue'
import { ref } from 'vue';
import type { JobObjectDataType } from '@/types/responseData'

const props = defineProps<{
    data?: JobObjectDataType[]
    type: number
}>()


</script>

<style lang="scss" scoped>
.list-item {
    margin-bottom: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;

    .top-info {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
        }
    }

    .tip {
        margin: 14rpx 0;

        .tip-item:last-child {
            border-right: none;
        }

        .tip-item:first-child {
            padding-left: 0;
        }

        .tip-item {
            padding-right: 21rpx;
            padding-left: 21rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #7E7E7E;
            border-right: 1rpx solid #c1c1c1;
        }
    }

    .bottom-info {
        .address {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #717171;
        }

        .com-info {
            .com-img {
                margin-right: 10rpx;

                image {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 10rpx;
                }
            }

            .con-name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
        }
    }
}
</style>